<!DOCTYPE html>

<!-- $Id: popup.html 10 2012-04-11 09:15:53Z azbitnev@gmail.com $ -->

<head>

<meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/> 
<meta http-equiv="Pragma" content="no-cache"/>
<meta http-equiv="Expires" content="-1"/>

<title>popup</title>

<link href="960c12.css" rel="stylesheet" type="text/css"/>

<link href="http://dl.dropbox.com/u/68550731/red-sparkle/red.sparkle.min.css" rel="stylesheet" type="text/css"/> 
<!--[if IE]><link href="http://dl.dropbox.com/u/68550731/red-sparkle/red.sparkle.ie.min.css" rel="stylesheet" type="text/css"/><![endif]-->

<link href="../release/themes/grey.min.css" rel="stylesheet" type="text/css"/> 

<script src="http://code.jquery.com/jquery.min.js" charset="utf-8" type="text/javascript"></script>
<script src="../release/jquery.ys.min.js"></script>

<style>

body { margin: 1em; }

.popup-holder {
	float: left;
	width: 5.4em;
	height: 1.2em;
	margin: 0 0.4em;
}

.popup-holder > span {
	cursor: pointer;
	text-decoration: none;
	color: navy;
	border-bottom: 1px dashed navy;
}

.popup {
	padding: 1em;
	width: 12em;
	background: #fff;
	border: 1px solid #ddd;
	border-top-color: #eee;
	box-shadow: 0 3px 6px #dddddd;
	-ms-box-shadow: 0 3px 6px #dddddd;
	position: relative;
	z-index: 5;
	visibility: hidden;
}

</style>

<!--[if lt IE 9]>
<style>
.popup {
	position: relative;
	top: -1px;
	left: -1px;
	filter: progid:DXImageTransform.Microsoft.Shadow(Color=#bbbbbb, Strength=0, Direction=0),
		progid:DXImageTransform.Microsoft.Shadow(Color=#bbbbbb, Strength=4, Direction=90),
		progid:DXImageTransform.Microsoft.Shadow(Color=#bbbbbb, Strength=6, Direction=180),
		progid:DXImageTransform.Microsoft.Shadow(Color=#bbbbbb, Strength=1, Direction=270)
	;
}
</style>
<![endif]-->

<script>

$(document).ready(function () {

	$.ys.popup.create('.popup-holder', {
		action: 'hover',
		show: function ($popup, $el) {
			$popup.css({
				opacity: 0,
				visibility: 'visible'
			}).animate({
				opacity: 1
			}, 250)
		},
		hide: function ($popup, $el) {
			$popup.animate({
				opacity: 0
			}, 250, function () {
				$popup.css({ visibility: 'hidden' })
			})
		}
	})
})

</script>

</head>

<body>

<div class="container_12">
	<div class="grid_12">

	<h1>Lorem ipsum dolor sit amet...</h1>

	<p>Lorem ipsum dolor sit amet, modus integre an vim, at vitae audiam has. Mea et posse tibique interpretaris. Summo audiam te quo. Dicta nemore quaeque duo cu, vis iisque tincidunt eu. An vel quis accusata ocurreret.</p>
	<div>
		<div class="left">Tollit expetenda pertinacia pro ea. Ea</div>
		<div id="ex1" class="popup-holder">
			<span>gubergren</span>
			<div class="popup">
				Lorem ipsum dolor sit amet, modus integre an vim, at vitae audiam has.
				Mea et posse tibique interpretaris. Summo audiam te quo.
			</div>
		</div>
		<div>constituto est, ex nonumy omnesque suavitate his. Copiosae suavitate has ut, et porro fuisset cum. Noster scaevola quaestio ne ius. No vix verterem tincidunt suscipiantur, at denique appareat pri.</div>
	</div>
	<p>Lorem ipsum dolor sit amet, modus integre an vim, at vitae audiam has. Mea et posse tibique interpretaris. Summo audiam te quo. Dicta nemore quaeque duo cu, vis iisque tincidunt eu. An vel quis accusata ocurreret.</p>
	<div>
		<div class="left">Tollit expetenda</div>
		<div id="ex2" class="popup-holder">
			<span>pertinacia</span>
			<div class="popup">Ea gubergren constituto est, ex nonumy omnesque suavitate his.</div>
		</div>
		<div>pro ea. Ea gubergren constituto est, ex nonumy omnesque suavitate his. Copiosae suavitate has ut, et porro fuisset cum. Noster scaevola quaestio ne ius. No vix verterem tincidunt suscipiantur, at denique appareat pri.</div>
	</div>
	<p>Lorem ipsum dolor sit amet, modus integre an vim, at vitae audiam has. Mea et posse tibique interpretaris. Summo audiam te quo. Dicta nemore quaeque duo cu, vis iisque tincidunt eu. An vel quis accusata ocurreret.</p>
	<p>Tollit expetenda pertinacia pro ea. Ea gubergren constituto est, ex nonumy omnesque suavitate his. Copiosae suavitate has ut, et porro fuisset cum. Noster scaevola quaestio ne ius. No vix verterem tincidunt suscipiantur, at denique appareat pri.</p>
</div>

</body>